import React, { useState, useEffect, useCallback } from 'react';
import { connect } from 'dva';
import { Tabs, Table, Input, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import LogSelector from './components/LogSelector';
import style from '@/pages/IndexPage.css';
const { TabPane } = Tabs;

const SystemLog = ({ dispatch, user, permission }) => {
    const { authorized } = user;
    const { logList, isLoading, currentPage, total } = permission;
    const [logType, setLogType] = useState('login');
    const [userName, setUserName] = useState('');
    const columns = [
        {
            title:'序号',
            width:'60px',
            fixed:'left',
            render:(text,record,index)=>{
                return `${ ( currentPage - 1) * 12 + index + 1}`;
            }
        },
        {
            title:'操作人',
            dataIndex:'operateUserName',
        },
        {
            title:'操作类型',
            dataIndex:'operateType'
        },
        {
            title:'操作描述',
            dataIndex:'operateDesc',
        },
        {
            title:'操作时间',
            dataIndex:'operateTime'
        },
        {
            title:'IP',
            dataIndex:'ip'
        }
        // {
        //     title:'所属公司',
        //     dataIndex:'company_id',
        //     render:(text)=>{
        //         let filterCompany = companyList.filter(i=>i.company_id == text)[0];
        //         return <div>{ filterCompany ? filterCompany.company_name : '' }</div>
        //     }
        // }
    ];
    useEffect(()=>{
        if ( authorized ){
            dispatch({ type:'permission/fetchLogList', payload:{ logType }});
        }
    },[authorized]);
    const handleSearch = useCallback((obj) => {
        dispatch({ type: 'permission/fetchLogList', payload:obj });
    }, []);
    return (
        <div className={style['page-container']}>
            <div style={{ height:'90px' }}>
                <LogSelector userName={userName} onChange={value=>setUserName(value)} logType={logType} onSearch={handleSearch} />
            </div>
            <div style={{ height:'calc( 100% - 90px)', paddingTop:'1rem' }}>
                <div className={style['card-container']}>
                    <Tabs activeKey={logType} className={style['custom-tabs']} onChange={activeKey=>{
                        setLogType(activeKey);
                        dispatch({type:'permission/fetchLogList', payload:{ userName, logType:activeKey }});
                    }}>
                        <TabPane key='login' tab='登录日志'>
                            <Table
                                columns={columns}
                                dataSource={logList || []}
                                className={style['self-table-container']}
                                rowKey="logId"
                                loading={isLoading}
                                bordered={true}
                                pagination={{current:currentPage, total, pageSize:12, showSizeChanger:false }}
                                onChange={(pagination)=>{
                                    dispatch({type:'permission/fetchLogList', payload:{ currentPage:pagination.current, userName, logType }});
                                }}
                            />
                        </TabPane>
                        <TabPane key='action' tab='操作日志'>
                            <Table
                                columns={columns}
                                dataSource={logList || []}
                                rowKey="logId"
                                className={style['self-table-container']}
                                loading={isLoading}
                                bordered={true}
                                pagination={{current:currentPage, total, pageSize:12, showSizeChanger:false }}
                                onChange={(pagination)=>{
                                    dispatch({type:'permission/fetchLogList', payload:{ currentPage:pagination.current, userName, logType }});
                                }}
                            />
                        </TabPane>
                    </Tabs>
                </div> 
            </div>
        </div>
    )
}

export default connect(({ user, permission })=>({ user, permission }))(SystemLog);
